<script setup>
import { onMounted, ref } from 'vue'
import { getCategoryPageDataApi } from '@/api/publish'
import { getBannersApi } from '@/api/home'
import { useRoute } from 'vue-router'
const route = useRoute()

const bannerList = ref([])
const setBannerList = async () => {
  const res = await getBannersApi(route.params.id)
  bannerList.value = res.data
}

const categoryData = ref([])
const setCategoryDate = async () => {
  const res = await getCategoryPageDataApi(route.params.id)
  categoryData.value = res.data
}

onMounted(() => {
  setBannerList()
  setCategoryDate()
})
</script>
<template>
  <div class="container">
    <!-- 面包屑 -->
    <div class="bread-container">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{
          categoryData.category?.name
        }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 轮播图 -->
    <div class="home-banner">
      <el-carousel type="card" :height="'240px'">
        <el-carousel-item v-for="item in bannerList" :key="item.id">
          <img :src="item.picture" alt="" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 热门品牌 -->
    <div class="sub-list">
      <h3>热门品牌</h3>
      <ul>
        <li v-for="i in categoryData" :key="i.id">
          <RouterLink
            :to="`/list?brandId=${i.id}&categoryId=${route.params.id}`"
          >
            <img :src="i.picture" />
            <p>{{ i.name }}</p>
          </RouterLink>
        </li>
      </ul>
    </div>
    <!-- 品牌 -->
    <div class="ref-cars" v-for="categ in categoryData" :key="categ.id">
      <div class="head">
        <h3>- {{ categ.name }}-</h3>
      </div>
      <ul>
        <li v-for="car in categ.vehiclePublishList" :key="car.id">
          <car-item-publish :car="car" />
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-banner {
  margin-bottom: 20px;
  img {
    text-align: center;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
  }
}
h3 {
  font-size: 28px;
  color: #666;
  font-weight: normal;
  text-align: center;
  line-height: 100px;
}
.sub-list {
  margin-top: 20px;
  background-color: #fff;
  border-radius: 10px;

  ul {
    display: flex;
    justify-content: space-around;

    li {
      width: 168px;
      height: 160px;

      a {
        text-align: center;
        display: block;
        font-size: 16px;

        img {
          width: 100px;
          height: 100px;
        }

        p {
          line-height: 40px;
        }

        &:hover {
          color: $xtxColor;
        }
      }
    }
  }
}

.ref-cars {
  background-color: #fff;
  margin-top: 20px;

  ul {
    display: flex;
    justify-content: space-between;
    padding: 0 30px 30px;
    flex-wrap: wrap;

    li {
      margin: 10px 0;
    }
  }
}
</style>
